// 调整图片用参数
var drawWidth = 0;
var drawHeigth = 0;
var xoffset = 0;
var yoffset = 0;
var rotate = 0;

// 选择本地照片
function previewImg(fileinput) {
    // 取得上传的文件
    var file = fileinput.files[0];
    var path = fileinput.value;
    var pathLength = path.length;

    // substring 从 path 长度-3 的开始截取, 截止位置是 path 的长度，结果就是 path 的最后三位:
    var additionName = path.substring(pathLength - 3, pathLength);

    // 判断是否为 .jpg .png .gif格式图片，是，则显示，否，则提示错误
    if (additionName.toLowerCase() == "jpg" || additionName.toLowerCase() == "png" || additionName.toLowerCase() == "gif") {
        var img = document.createElement("img");
        img.id = "localPhoto";
        var reader = new FileReader();
        reader.onload = (function (aImg) {
            return function (e) {
                // 加载图片
                aImg.src = e.target.result;
                // 备份
                var backupImgSrc = document.getElementById("backupImgSrc");
                backupImgSrc.value = e.target.result;
                // 显示画面
                var canvas = document.getElementById("photoCanvas");
                var ctx = canvas.getContext('2d');

                // 初始化显示宽度和高度
                drawWidth = canvas.width;
                drawHeigth = canvas.height;

                // 计算画面的宽度和高度
                if (aImg.width > aImg.height) {
                    // 调整画布到适合宽度
                    drawWidth = canvas.width;
                    drawHeigth = Math.round(aImg.height * (canvas.width / aImg.width));
                    // 调整原点
                    xoffset = 0;
                    yoffset = Math.round((canvas.height - drawHeigth) / 2);
                } else {
                    // 调整画面到适合高度
                    drawHeigth = canvas.height;
                    drawWidth = Math.round(aImg.width * (canvas.height / aImg.height));
                    // 调整原点
                    xoffset = Math.round((canvas.width - drawWidth) / 2);
                    yoffset = 0;
                }
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                ctx.drawImage(aImg, xoffset, yoffset, drawWidth, drawHeigth);
            };
        })(img);
        reader.readAsDataURL(file);

        // 显示图片
        $("#photoPreview").empty();
        $("#photoPreview").append(img);
        setRedrawImage();
    }
    else {
        // 显示错误信息
        document.getElementById('photoPreview').innerHTML = "<font color=red>请选择格式为jpg,png或gif的图片!否则无法预览及上传</font>";
    }
}

// 保存本地图片
function savePhoto(width,height) {
    if ($("#localPhoto").html() != undefined) {
        // 开始保存图片
        var canvas = document.getElementById("photoCanvas");
        var imgData = canvas.toDataURL("image/png");

        $('#image').val(imgData);
        // 创建图片
        var image = document.createElement("img");
        image.width = width;
        image.height = height;
        image.src = imgData;
        // 显示图片到会员添加画面上
        $("#memberPhoto").empty();
        $("#memberPhoto").append(image);
        $("#memberPhoto").show();
        // $("#photo").val(photoData.value);
        // $("#icon").val(photoData.value);
        // $("#coverImage").val(photoData.value);
    }
}

// 还原
function setRedrawImage() {
    // 取得canvas
    var canvas = document.getElementById("photoCanvas");
    var context = canvas.getContext('2d');

    // 取得image
    var image = document.getElementById("localPhoto");

    // 恢复原始图片
    image.src = document.getElementById("backupImgSrc").value;

    // 清除画布
    context.clearRect(0, 0, canvas.width, canvas.height);

    // 计算画面的宽度和高度
    if (image.width > image.height) {
        // 调整画布到适合宽度
        drawWidth = canvas.width;
        drawHeigth = Math.round(image.height * (canvas.width / image.width));
        // 调整原点
        xoffset = 0;
        yoffset = Math.round((canvas.height - drawHeigth) / 2);
    } else {
        // 调整画面到适合高度
        drawHeigth = canvas.height;
        drawWidth = Math.round(image.width * (canvas.height / image.height));
        // 调整原点
        xoffset = Math.round((canvas.width - drawWidth) / 2);
        yoffset = 0;
    }

    // 重画
    context.drawImage(image, xoffset, yoffset, drawWidth, drawHeigth);
}

// 放大
function setZoomIn() {
    // 取得canvas
    var canvas = document.getElementById("photoCanvas");
    var context = canvas.getContext('2d');

    // 取得image
    var image = document.getElementById("localPhoto");

    // 清除画布
    context.clearRect(0, 0, canvas.width, canvas.height);

    // 重新计算原点
    xoffset = xoffset - Math.round(drawWidth * 0.1 / 2);
    yoffset = yoffset - Math.round(drawHeigth * 0.1 / 2);

    // 放大1.1倍
    drawWidth = Math.round(drawWidth * 1.1);
    drawHeigth = Math.round(drawHeigth * 1.1);

    // 重画
    context.drawImage(image, xoffset, yoffset, drawWidth, drawHeigth);
}

// 缩小
function setZoomOut() {
    // 取得canvas
    var canvas = document.getElementById("photoCanvas");
    var context = canvas.getContext('2d');

    // 取得image
    var image = document.getElementById("localPhoto");

    // 清除画布
    context.clearRect(0, 0, canvas.width, canvas.height);

    // 重新计算原点
    xoffset = xoffset + Math.round(drawWidth * 0.1 / 2);
    yoffset = yoffset + Math.round(drawHeigth * 0.1 / 2);

    // 缩小0.9倍
    drawWidth = Math.round(drawWidth * 0.9);
    drawHeigth = Math.round(drawHeigth * 0.9);

    // 重画
    context.drawImage(image, xoffset, yoffset, drawWidth, drawHeigth);
}

// 向上
function setMoveUp() {
    // 取得canvas
    var canvas = document.getElementById("photoCanvas");
    var context = canvas.getContext('2d');

    // 取得image
    var image = document.getElementById("localPhoto");

    // 清除画布
    context.clearRect(0, 0, canvas.width, canvas.height);

    // 向上移动
    yoffset = yoffset - Math.round(image.height * 0.01);

    // 重画
    context.drawImage(image, xoffset, yoffset, drawWidth, drawHeigth);
}

// 向下
function setMoveDown() {
    // 取得canvas
    var canvas = document.getElementById("photoCanvas");
    var context = canvas.getContext('2d');

    // 取得image
    var image = document.getElementById("localPhoto");

    // 清除画布
    context.clearRect(0, 0, canvas.width, canvas.height);

    // 向上移动
    yoffset = yoffset + Math.round(image.height * 0.01);

    // 重画
    context.drawImage(image, xoffset, yoffset, drawWidth, drawHeigth);
}

// 向左
function setMoveLeft() {
    // 取得canvas
    var canvas = document.getElementById("photoCanvas");
    var context = canvas.getContext('2d');

    // 取得image
    var image = document.getElementById("localPhoto");

    // 清除画布
    context.clearRect(0, 0, canvas.width, canvas.height);

    // 向左移动
    xoffset = xoffset - Math.round(image.width * 0.01);

    // 重画
    context.drawImage(image, xoffset, yoffset, drawWidth, drawHeigth);
}

// 向右
function setMoveRight() {
    // 取得canvas
    var canvas = document.getElementById("photoCanvas");
    var context = canvas.getContext('2d');

    // 取得image
    var image = document.getElementById("localPhoto");

    // 清除画布
    context.clearRect(0, 0, canvas.width, canvas.height);

    // 向右移动
    xoffset = xoffset + Math.round(image.width * 0.01);

    // 重画
    context.drawImage(image, xoffset, yoffset, drawWidth, drawHeigth);
}

// 顺时针旋转90度
function setClockWise() {
    // 取得canvas
    var canvas = document.getElementById("photoCanvas");
    var context = canvas.getContext('2d');

    // 取得image
    var image = document.getElementById("localPhoto");
    // 旋转90度,将旋转后的图片，保存到image中
    rotateImage(90, image);

    // 交换宽度和高度
    var exchange = drawWidth;
    drawWidth = drawHeigth;
    drawHeigth = exchange;

    // 交换x和y
    exchange = xoffset;
    xoffset = yoffset;
    yoffset = exchange;

    // 清除画布
    context.clearRect(0, 0, canvas.width, canvas.height);

    // 重画
    context.drawImage(image, xoffset, yoffset, drawWidth, drawHeigth);
}

// 逆时针旋转90度
function setAntiClockWise() {
    // 取得canvas
    var canvas = document.getElementById("photoCanvas");
    var context = canvas.getContext('2d');

    // 取得image
    var image = document.getElementById("localPhoto");
    // 旋转-90度,将旋转后的图片，保存到image中
    rotateImage(-90, image);

    // 交换宽度和高度
    var exchange = drawWidth;
    drawWidth = drawHeigth;
    drawHeigth = exchange;

    // 交换x和y
    exchange = xoffset;
    xoffset = yoffset;
    yoffset = exchange;

    // 清除画布
    context.clearRect(0, 0, canvas.width, canvas.height);

    // 重画
    context.drawImage(image, xoffset, yoffset, drawWidth, drawHeigth);
}

// 旋转图片
function rotateImage(angle, image) {
    // 新建旋转图片用的canvas
    var canvas = document.createElement("canvas");
    var context = canvas.getContext('2d');

    // 设定canvas的大小
    canvas.height = image.width;
    canvas.width = image.height;

    // 将旋转的原点移到canvas中心
    context.translate(canvas.width / 2, canvas.height / 2);
    // 旋转
    context.rotate(angle * Math.PI / 180);
    context.translate(-canvas.height / 2, -canvas.width / 2);

    // 清除画布
    context.clearRect(0, 0, canvas.width, canvas.height);

    // 重画
    context.drawImage(image, 0, 0, image.width, image.height);

    // 保存图片到目标image
    image.src = canvas.toDataURL("image/jpeg");
}